<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理</title>
    <link rel="stylesheet" href="../../style/member/index.css">
    <link rel="stylesheet" href="../../libs/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css">

</head>

<body>
    <div class="containers">
        <div class="containers-header">
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="inputPassword6" class="col-form-label">姓名</label>
                </div>
                <div class="col-auto">
                    <input type="password" id="inputPassword6" class="form-control"
                        aria-describedby="passwordHelpInline" placeholder="请输入姓名">
                </div>
                <div class="col-auto">
                    <button class="btn btn-dark">搜索</button>
                </div>
            </div>

            <a href="./addemp.html" type="button" class="btn btn-primary" target="tv">添加员工</a>
            <a type="button" class="btn btn-danger">删除员工</a>

        </div>
        <!-- 内容展示区域 -->
        <div class="containers-connet">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>性别</th>
                        <th>生日</th>
                        <th>月薪</th>
                        <th>入职时间</th>
                        <th>职位</th>
                        <th>队号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>小李不讲理</td>
                        <td>17538512478</td>


                        <td>男</td>
                        <td>2023-5-12</td>
                        <td>10000</td>
                        <td>2023-5-20</td>
                        <td>队长</td>
                        <td>002</td>
                        <td>
                            <button type="button" class="btn btn-warning">冻结</button>
                            <a href="./detailsEmp.html" target="tv" type="button" class="btn btn-info ">详情</a>
                            <button type="button" class="btn btn-danger">删除</button>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#exampleModal">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 分页组件 -->
            <div class="containers-connet-fonter">

                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
        <!-- 修改员工模态框 -->

        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">修改密码</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="add-ename">姓名:</label>
                                <input type="text" class="form-control" id="add-ename" placeholder="姓名">
                            </div>
                            <div class="form-group">
                                <label for="add-ename">年龄:</label>
                                <input type="text" class="form-control" id="add-ename" placeholder="年龄">
                            </div>

                            <div class="form-group">
                                <label for="">性别：</label>
                                <label class="radio-inline">
                                    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="男"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="女"> 女
                                </label>
                            </div>
                            <div class="form-group ">
                                <label>状态:</label>
                                <select class="form-control" id="add-pid">
                                    <option value="冻结">冻结</option>
                                    <option value="激活">激活</option>

                                </select>
                            </div>




                            <div class="form-group">
                                <label>手机号:</label>
                                <input type="text" class="form-control" id="add-ename" placeholder="请输入手机号">
                            </div>

                            <div class="form-group">
                                <label>等级：</label>
                                <select class="form-control" id="add-deptId">
                                    <option value="VIP1">VIP1</option>
                                    <option value="VIP2">VIP2</option>
                                    <option value="VIP3">VIP3</option>

                                </select>
                            </div>
                            <div class="form-group">
                                <label>简介</label>

                                <textarea class="form-control" rows="3"></textarea>


                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="btn()">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../libs/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"></script>
<script>

    /* 关闭按钮 */
    function btn() {
        /*   let addename = document.getElementById("add-ename")
          console.log(addename.value); */
        let _exampleModal = document.getElementById("exampleModal")
        let _model = document.getElementsByClassName("modal-backdrop show")
        _exampleModal.style.display = "none";
        _model[0].style.opacity = "0"
        setTimeout(() => {
            window.location.reload()
        }, 2000);
    }

</script>

</html>